<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">

	<head>
		<meta charset="UTF-8">
		<title>我的订单</title>
		<link type="text/css" rel="stylesheet" href="dist/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/order_list.css"/>
	</head>

	<body>
		<!--导航部分  begin-->
		<div class="container" style="margin-top: 5px;">
			<nav class="navbar navbar-default well-sm" style="padding-left: 0px;" role="navigation">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
				            <span class="sr-only">切换导航</span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
				            <span class="icon-bar"></span>
        				</button>
						<a class="navbar-brand" href="#">优客书城</a>
					</div>
					<div class="collapse navbar-collapse" id="example-navbar-collapse">
						<ul class="nav navbar-nav pull-left">
							<li>
								<a href="index.html">首页</a>
							</li>
							<li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										图书类型
										<b class="caret"></b>
									</a>
									<ul class="dropdown-menu">
										<li>
											<a href="books_list.html">精选图书</a>
										</li>
										<li class="divider"></li>
										<li>
											<a href="books_list.html">推荐图书</a>
										</li>
										<li class="divider"></li>
										<li>
											<a href="books_list.html">特价图书</a>
										</li>
										<li class="divider"></li>
									</ul>
								</li>
							</li>
							<li>
								<a href="#" data-toggle="modal" data-target="#myModal">登录</a>
							</li>
							<li>
								<a href="index.html">安全退出</a>
							</li>
							<li>
								<a href="#" data-toggle="modal" data-target="#register">注册</a>
							</li>
							<li class="active">
								<a href="order_list.html">我的订单</a>
							</li>
							<li>
								<a href="cart.html"><span class="glyphicon glyphicon-shopping-cart"> </span>我的购物车</a>
							</li>
						</ul>
						<div class="input-group col-md-3 pull-right" style="positon:relative;padding: 7px;">
							<input type="text" class="form-control" placeholder="请输入图书名" />
							<span class="input-group-btn">
					            <button class="btn btn-info btn-search">
					            	<span class="glyphicon glyphicon-search"></span>
							</button>
							</span>
						</div>
					</div>
				</div>
			</nav>
		</div>
		<!--导航部分 end-->

		<!--最顶端轮播图片 begin-->
		<div id="gcarouse" class="container">
			<!--轮播-->
			<div id="myCarousel" class="carousel slide">
				<!-- 轮播（Carousel）指标 -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
				</ol>
				<!-- 轮播（Carousel）项目 -->
				<div class="carousel-inner">
					<div class="item active">
						<a href="details.html"><img src="images/advert1.jpg" class="pull-left" alt="First slide"></a>

					</div>
					<div class="item">
						<a href="details.html"><img src="images/advert2.jpg" class="pull-left" alt="First slide"></a>

					</div>
					<div class="item">
						<a href="details.html"><img src="images/advert3.jpg" class="pull-left" alt="First slide"></a>

					</div>
				</div>

				<!-- 轮播（Carousel）导航 -->
				<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
				<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
			</div>
		</div>
		<!--最顶端轮播图片 end-->

		<!--订单begin-->
		<!--外层div-->
		<div class="container">
			<!--左边-->
			<div class="container pull-left">
				<ol class="breadcrumb">
					<li>
						<a href="#" class="text-success"><span class="glyphicon glyphicon-list"></span>&nbsp;&nbsp;我的订单</a>
					</li>
				</ol>
				<div class="table-responsive">
				    <table class="table table-hover table-striped">
				    <thead>
<!--					    <tr class="active">-->
<!--					    	<th>图书ID</th>-->
<!--					        <th>订单编号</th>-->
<!--					        <th>提交时间</th>-->
<!--					        <th>用户名</th>-->
<!--					        <th>实付款(元)</th>-->
<!--					        <th>是否支付</th>-->
<!--					        <th>交易状态</th>-->
<!--					        <th>修改</th>-->
<!--					    </tr>-->
				    </thead>
<!--                        <tr>-->
						<tr class="warning">
<!--							<td class="1"></td>-->
<!--							<td class="2"></td>-->
<!--							<td class="3"></td>-->
<!--							<td class="4"></td>-->
<!--							<td class="5"></td>-->
<!--							<td class="6"></td>-->
<!--							<td class="7"></td>-->
<!--							<td class="8"></td>-->
						</tr>
				  </table>
				</div>
<!--				<table class="table table-hover table-striped">-->
<!--				<tr class="warning">-->
<!--                    <td>1001</td>-->
<!--                    <td><img src="images/yuannideqingchunbufumengxiang.jpg"></td>-->
<!--                    <td>愿你的青春不负梦想</td>-->
<!--                    <td>80.0</td>-->
<!--                    <td>2</td>-->
<!--                    <td>160.0</td>-->
<!--                    <td>01/08/2017</td>-->
<!--                    <td>未付款</td>-->
<!--                </tr>-->
<!--				</table>-->
				<!--内容展示end-->
			</div>
			<!--分页begin-->
			<div class="container">
				<div class="row text-center">
					<div class="col-md-12">
						<ul class="pagination">
							<li><a href="#">首页</a></li>
						    <li class="disabled"><a href="#">&laquo;</a></li>
						    <li><a href="#">1</a></li>
						    <li><a href="#">2</a></li>
						    <li class="active"><a href="#">3</a></li>
						    <li><a href="#">4</a></li>
						    <li><a href="#">5</a></li>
						    <li><a href="#">&raquo;</a></li>
						    <li><a href="#" style="border: 1px solid #ddd;">尾页</a></li>
						    <li><a style="border: 0px;margin-left: 0px;">当前页3/5总页</a></li>
						    <li>

						     	<div id="search" class="input-group" style="positon:relative;">
									<input type="text" class="form-control" placeholder="跳转指定页" />
									<span class="input-group-btn">
							            <button class="btn btn-info btn-search">GO</button>
									</span>
								</div>
						   </li>
						    <li><a style="padding-top: 0px;border: 0px;">
						     	<label>每页显示:</label>
						     	<select id="pageSize" class="form-control" style="width: 100px;display: inline;">
						     		<option value="2">2</option>
						     		<option value="2">4</option>
						     		<option value="2">6</option>
						     		<option value="2">8</option>
						     	</select>
						     	<label>条</label>
						     </a>
						   </li>
					    </ul>
					</div>
				</div>
			</div>
			<!--分页end-->
		</div>
		<script src="dist/js/jquery.min.js"></script>
		<script src="dist/js/bootstrap.min.js"></script>
		<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('#datetimepicker').datetimepicker();
			$('#datetimepicker2').datetimepicker();

		</script>
<!--		<script>-->
<!--			$.ajax({-->
<!--				url: 'http://192.168.96.109:8060/order/orders',-->
<!--				type: 'get',-->
<!--				data: {},-->
<!--				success: (res) => {-->
<!--					console.log(res)-->
<!--				}-->
<!--			})-->
<!--		</script>-->
		</script>
		<script>
				$.ajax({
					url: 'http://192.168.96.109:8060/order/orders',
					type: 'get',
					data: {
					},
					success: (res) => {
						// let data = res.data
						// console.log(data)
						res.forEach(element => {
							console.log(element.name)
							let template = `
				 <table class="table table-hover table-striped">
				  <tr class="active">
                    <th>图书ID</th>
                    <th>订单编号</th>
                    <th>提交时间</th>
                    <th>用户名</th>
                    <th>实付款(元)</th>
                    <th>是否支付</th>
                    <th>交易状态</th>
                    <th>删除</th>
                 </tr>
				</tr>
                	<td class="1">${element.bid}</td>
                	<td class="2">${element.orderno}</td>
                	<td>${element.tjtime}</td>
                	<td>${element.uid}</td>
               	 	<td>${element.orderamount}</td>
                	<td>${element.paystatus}</td>
                	<td>${element.orderstatus}</td>
                </tr>
                    </table>`
							$(".warning").append(template)
						});
						console.log(res)
					}
				})
		</script>
        <script>
        $.ajax({
        url: 'http://192.168.96.109:8060/order/useOrder',
        type: 'get',
        data: {
        },
        success: (res) => {
        // let data = res.data
        // console.log(data)
        res.forEach(element => {
        console.log(element.name)
        let template = `
        <table class="table table-hover table-striped">
            <tr class="active">
                <th>图书ID</th>
                <th>订单编号</th>
                <th>提交时间</th>
                <th>用户名</th>
                <th>实付款(元)</th>
                <th>是否支付</th>
                <th>交易状态</th>
                <th>删除</th>
            </tr>
            </tr>
            <td class="1">${element.bid}</td>
            <td class="2">${element.orderno}</td>
            <td>${element.tjtime}</td>
            <td>${element.uid}</td>
            <td>${element.orderamount}</td>
            <td>${element.paystatus}</td>
            <td>${element.orderstatus}</td>
            </tr>
        </table>`
        $(".warning").append(template)
        });
        console.log(res)
        }
        })
        </script>

<!--        // // 下一页-->
<!--        // function nextPage(){-->
<!--        //     // 获取当前页码-->
<!--        //     let page = parseInt($("#page").html())-->
<!--        //     // 当前页面 + 1并且渲染到页面-->
<!--        //     page += 1;-->
<!--        //     $("#page").html(page)-->
<!--        //     renderHtml();-->
<!--        // }-->
<!--		//-->
<!--        // function parentPage(){-->
<!--        //     // 获取当前页码-->
<!--        //     let page = parseInt($("#page").html())-->
<!--        //     // 当前页吗 - 1并且渲染到页面-->
<!--        //     if(page - 1 <= 0){-->
<!--        //         page = 1-->
<!--        //     }else{-->
<!--        //         page = page - 1-->
<!--        //     }-->
<!--        //     $("#page").html(page)-->
<!--        //     renderHtml();-->
<!--        // }-->
<!--		//-->
<!--        // // 点击下拉框更改页面的大小-->
<!--        // $("select").change( (event)=>{-->
<!--        //     let chose = event.target.value-->
<!--        //     console.log(chose)-->
<!--        //     renderHtml()-->
<!--        // })-->

    <!--    renderHtml();-->
	<!--</script>-->

	</body>
</html>
